<template>
  <div id="templ">
      <!--使用mui实现图文列表-->
      <ul class="mui-table-view">
          <li class="mui-table-view-cell mui-media" v-for="(item,index) in list" :key="index">
              <!--<router-link :to="'/news/newsinfo/'+item.id">-->
              <router-link  v-bind="{to:'/news/newsinfo/'+item.id}">
                  <img class="mui-media-object mui-pull-left" :src="item.img_url">
                  <div class="mui-media-body">
                      {{item.title}}
                      <p class='mui-ellipsis' v-text="item.zhaiyao"></p>
                  <div class="ft">
                      <span>发表时间:{{item.add_time | datefmt('YYYY-MM-DD HH:mm:ss')}}</span>
                      <span  class="clickcount">点击:{{item.click}}</span>
                  </div>
                  </div>
              </router-link>
          </li>
      </ul>
  </div>
</template>

<script>
    import  common from '../../kits/common.js'
    import { Toast } from 'mint-ui';
export default {
    data(){
        return{
            list:[]
        }
    },
    methods:{
       getnewslist(){
           var url =common.apidomain+"/api/getnewslist";
           this.$http.get(url).then(
               function (response) {
                   var body =response.body;
                   if(body.status !=0){
                       Toast(body.message);
                       return;
                   }
                   this.list=body.message;
               }
           )
       }
    },
    created(){
        this.getnewslist();
    }
}
</script>

<style scoped>
.mui-table-view  img{
    width: 80px;
    height: 80px;
}
.mui-table-view .mui-media-object{
    line-height: 80px;
    max-width:80px;
}
.ft{
    margin-top: 1.5em;
    font-size: 4px;
    color: #0094ff;
}
.ft  .clickcount{
    margin-left:20px;
}
</style>
